// import React from 'react' //注册
import IconFont from '../../components/iconfont'//IconFont
import { Form, Input, Button, Alert, } from 'antd';
import { useState, useEffect } from 'react';
import nowTime from '../../components/timer'
import axios from 'axios'
import Img from '../../img/f1.jpg'
import './login.less'
const Register = (props) => {
    let [fields, setFields] = useState([
        { name: ["username"], value: "" },
        { name: ["yan"], value: "" },
        { name: ["password"], value: "" },
        { name: ["confirm"], value: "" },
    ])
    let [zhi, changZhi] = useState({ buttonzhi: "验证码", buttonflag: false, pone: '1234' })
    let [will,setWill]=useState(["1","2","3","4","5","6","7","8","9","q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","l","z","x","c","v","b","n","m","Q","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","C","V","B","N","M"])
    useEffect(() => {
        console.log(props);
    }, [])
    const onFinish = (values) => {
        if (zhi.pone == values.yan) {
            axios({ url: '/api/front_end/register', method: 'post', data: { namer: values.username, account_number: values.username, password: values.password, timer: nowTime(), ip: "192.168.1.193", imgUrl: Img } }).then((res) => {
                console.log(res);
                if (res.data.code == "01") {
                    props.props.history.push('/login/log')
                    props.ke('/login/log')
                }
            })
        }
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const enterLoading = () => {
        let str=""
        for (let index = 0; index <4; index++) {
            str+=will[Math.floor(Math.random()*(will.length+1))]
        }
        zhi.pone=str
        changZhi(zhi)
        let n = 60
        let timeee = setInterval(() => {
            n--
            if (n == 57) {
                alert(zhi.pone)
            }
            if (n == 0) {
                clearInterval(timeee)
                zhi.buttonzhi="请重新获取验证码"
                zhi.buttonflag=false
                changZhi({...zhi})
            }else{
                zhi.buttonzhi="正在发送" + n + "秒"
                zhi.buttonflag= true
            changZhi({ ...zhi })
            }
        }, 1000)
    };
    const onPhoneChange = (e) => {
        switch (e.target.value.length) { //加空字符串
            case 3:
                console.log(zhi);
                // let zhi = e.target.value
                // zhi = zhi + " "
                // setFields([
                //     { name: ["username"], value: zhi },
                //     { name: ["yan"], value: "" },
                //     { name: ["password"], value: "" },
                //     { name: ["confirm"], value: "" },
                // ])
                break;
            case 8:
                //    let  hen=e.target.value
                //     hen=hen+" "
                //     setFields([
                //         { name: ["username"], value: hen },
                //         { name: ["yan"], value: "" },
                //         { name: ["password"], value: "" },
                //         { name: ["confirm"], value: "" },
                //     ])
                break;
            default:
                break;
        }
    }
    return (
        <Form
            name="basic"
            className="register_form"
            fields={fields}
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
            <Form.Item
                name="username"
                rules={[
                    {
                        required: true,
                        message: 'Please input your username!',
                    },
                    {
                        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                        message: "格式不正确！"
                    }
                ]}
            >
           
                
                <Input onChange={onPhoneChange} className={"regirst_input"} placeholder="在此填写你的手机号" prefix={<IconFont type="icon-shouji"></IconFont>} />
            </Form.Item>
            <Form.Item
                name="yan"
                rules={[
                    {
                        required: true,
                        message: 'Username is required!',
                    },
                ]}
            >
                <Input maxLength="12" suffix={
                    <Button
                        className={"register_yan"}
                        disabled={zhi.buttonflag}
                        onClick={enterLoading}>
                        {zhi.buttonzhi}
                    </Button>
                } className={"regirst_input"} placeholder="填写验证码" prefix={<IconFont type="icon-shouji"></IconFont>} />

            </Form.Item>
            <Form.Item
                name="password"
                rules={[
                    {
                        required: true,
                        message: 'Please input your password!',
                    },
                    {
                        pattern: /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)\S{6,16}$/,
                        message: "格式不正确！"
                    }
                ]}
            >
                <Input.Password className={"regirst_input"} placeholder="设置你的密码" prefix={<IconFont type="icon-dasuozi"></IconFont>} />
            </Form.Item>

            <Form.Item
                name="confirm"
                dependencies={['password']}
                hasFeedback
                rules={[
                    {
                        required: true,
                        message: 'Please confirm your password!',
                    },
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                            if (!value || getFieldValue('password') === value) {
                                return Promise.resolve();
                            }

                            return Promise.reject(new Error('The two passwords that you entered do not match!'));
                        },
                    }),
                ]}
            >
                <Input.Password className={"regirst_input"} placeholder="再次输入你的密码" prefix={<IconFont type="icon-dasuozi"></IconFont>} />
            </Form.Item>
            <Form.Item
            >
                <Button type="primary" htmlType="submit" className={"regirst_button"}>
                    Submit
                </Button>
            </Form.Item>
        </Form>
    );
};

export default Register